<!DOCTYPE html>

<ui:composition template="../template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">

        <!-- ================== LISTADO DE ORDENES DE TRABAJO ================-->
        <h:panelGroup  rendered="#{!ordenTrabajoBean.mostrarForm}" id="panelListado"> 
            <div class="col-md-6">
                <h4>Mantenimiento de Ordenes de trabajo</h4>
                <h:form id="formListadoClientes">  
                    <div>
                        <h:commandButton value="Nuevo" class="btn btn-default" action="#{ordenTrabajoBean.verFormulario(true)}" />                                 
                    </div>
                    <br/>

                    <div class="panel panel-default">
                        <div class="table-responsive">
                            <p:dataTable var="p" 
                                         value="#{ordenTrabajoBean.listaOrdenes}" 
                                         paginator="true" 
                                         rows="10"   
                                         paginatorPosition="bottom" 
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                         rowsPerPageTemplate="5,10,15"   
                                         styleClass="table table-bordered table-striped table-condensed"
                                         style="font-size: 12px;" emptyMessage="No se encontraron registros">  
                                <p:column>  
                                    <div style="text-align: center;">
                                        <h:commandLink action="#{ordenTrabajoBean.editar(p)}" 
                                                       styleClass="btn btn-default btn-xs"
                                                       title="Editar">                                     
                                            <h:graphicImage  library="pics" name="edit.png" width="15px;"/>                                    
                                        </h:commandLink>
                                    </div>
                                </p:column> 
                                <p:column >    				
                                    <f:facet name="header">C&#243;digo</f:facet>    				
                                        #{p.codigo}
                                </p:column>
                                <p:column >    				
                                    <f:facet name="header">Fecha</f:facet>    				
                                    <h:outputText value="#{p.fechaRegistro}">
                                        <f:convertDateTime pattern="dd/MM/yyyy"/>
                                    </h:outputText>
                                </p:column>
                                 <p:column >    				
                                    <f:facet name="header">Cliente</f:facet>    				
                                    <h:outputText value="#{p.descCliente}"/>
                                </p:column>
                                <p:column >    				
                                    <f:facet name="header">Carrera</f:facet>    				
                                    <h:outputText value="#{p.tipoCarrera}"/>
                                </p:column>
                                <p:column >
                                    <f:facet name="header">Estado</f:facet>
                                        #{p.estado}
                                </p:column>                              
                                <p:column>
                                    <div style="text-align: center;">
                                        <h:commandButton class="btn btn-default btn-xs" 
                                                         onclick="return confirm('desea anular esta orden?');"
                                                         action="#{ordenTrabajoBean.anular(p)}" 
                                                         value="X" 
                                                         title="Anular orden"/>
                                    </div>
                                </p:column> 
                            </p:dataTable> 
                        </div>
                    </div>

                </h:form>            
            </div>
        </h:panelGroup> 
        <!-- =========================================  -->

        <!--==================== FORMULARIO ORDENES DE TRABAJO =================-->
        <h:panelGroup  rendered="#{ordenTrabajoBean.mostrarForm}" id="panelFormulario">   
            <h:outputScript target="head">  $ = jQuery;</h:outputScript><!--ESTA LINA ES NECESARIA PARA QUE FUNCIONE JQUERY-->
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".ui-messages").fadeOut(3000);
                });
            </script>

            <div class="col-md-10">
                <h:form id="formOrdenTrabajo" onkeypress="if (event.keyCode == 13)
                            return false;">
                    <div class="btn-group" > 
                        <h:commandButton value="Regresar" class="btn btn-default" action="#{ordenTrabajoBean.iniciar()}" immediate="true"/>  
                        <h:commandButton value="Grabar" class="btn btn-default" 
                                         action="#{ordenTrabajoBean.grabar()}" 
                                         rendered="#{ordenTrabajoBean.mostrarBotonGrabar}"/> 
                    </div>            

                    <br/>
                    <!-- se pone for="idCliente" para que no aparezca el sumario de mensajes y solamtene salgan los asteriscos-->
                    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" escape="false" for="idOrden"/> 
                    <br/>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Registro de Orden de trabajo</h3>
                        </div>
                        <div class="panel-body">
                            <!-- <div class="form-horizontal" id="formControles">  DIV COMO SI FUERA UN FORM-->                      
                            <div class="row">
                                <label for="codigo"  >Num.Orden: </label>

                                <h:outputText  class="mayuscula" id="codigo" 
                                               value=" #{ordenTrabajoBean.orden.codigo}"  />                              

                            </div>
                            <div class="row">
                                <label for="codigo"  >Razon Social: </label>
                                <h:outputText  class="mayuscula" id="razonSocial" 
                                               value=" #{ordenTrabajoBean.orden.descCliente}"  />                              
                            </div>
                            <div class="row">

                                <label for="pedidos" >Num.Pedidos: </label>

                                <h:inputText  class="mayuscula" id="pedidos"
                                              value="#{ordenTrabajoBean.cadenaPedidos}" 
                                              required="true" readonly="true"
                                              requiredMessage="*"/>
                                <h:message for="pedidos" class="obligatorio"/>


                                <p:commandLink immediate="true" update="clientesDialog" 
                                               action="#{ordenTrabajoBean.mostrarDialog()}"
                                               title="Buscar pedidos por clientes">
                                    <h:graphicImage  library="pics" name="icono_lupa.gif" width="25px;"/>
                                </p:commandLink>

                            </div>  
                            <div class="row">
                                <label for="pedidos" >Tipo carrera </label>

                                <h:selectOneMenu value="#{ordenTrabajoBean.orden.tipoCarrera}">
                                    <f:selectItem itemLabel="10" itemValue="10"/>
                                    <f:selectItem itemLabel="11" itemValue="11"/>
                                    <f:selectItem itemLabel="12" itemValue="12"/>
                                </h:selectOneMenu>
                                <h:message for="pedidos" class="obligatorio"/>
                            </div>
                            <div class="row">
                                <h:outputLabel for="chkVariasMaquinas" value="Asignar varias maquinas">
                                    <h:selectBooleanCheckbox value="#{ordenTrabajoBean.orden.asignarVariasMaquinas}"/>
                                </h:outputLabel>
                            </div>
                            <div class="row">
                                <h:commandButton action="#{ordenTrabajoBean.buscarDetallePedidos()}"  
                                                 class="btn btn-default" 
                                                 value="Buscar pedidos"/>
                            </div>
                            <div class="row">
                                <p:dataTable id="tblDetallePedido"
                                             value="#{ordenTrabajoBean.orden.lstPedidos}"
                                             var="ped">
                                    <p:columnGroup type="header">
                                        <p:row>
                                            <p:column headerText="Item" />
                                            <p:column headerText="Descripción" />
                                            <p:column headerText="Precio Uni" />
                                            <p:column headerText="Cantidad" />
                                            <p:column headerText="SubTotal" />
                                            <p:column headerText="Arte" />
                                        </p:row>
                                    </p:columnGroup>
                                    <p:subTable value="#{ped.lstDetallePedido}" var="det">
                                        <f:facet name="header">
                                            <h:outputText value="Num.Pedido: #{ped.numPedido}"/>
                                        </f:facet>
                                        <p:column headerText="Nro.Det">
                                            <h:outputText value="#{det.codDetalle}"/>
                                        </p:column>
                                        <p:column headerText="Descripcion">
                                            <h:outputText value="#{det.descripcion}"/>
                                        </p:column>
                                        <p:column headerText="Precio Unitario">
                                            <h:outputText value="#{det.precio}"/>
                                        </p:column>
                                        <p:column headerText="Cantidad">
                                            <h:outputText value="#{det.cantidad}"/>
                                        </p:column>
                                        <p:column headerText="Subtotal">
                                            <h:outputText value="#{det.subtotal}"/>
                                        </p:column>
                                        <p:column headerText="Subtotal">
                                            <h:commandLink action="#{ordenTrabajoBean.descargarArte(det)}"
                                                           rendered="#{!empty det.archivo }">
                                                Ver
                                            </h:commandLink>
                                        </p:column>
                                    </p:subTable>
                                </p:dataTable>

                            </div>

                            <!--</div>-->
                        </div>
                    </div>
                    <p:dialog id="clientesDialog" widgetVar="clientesDialog" modal="true" closeOnEscape="true" 
                              closable="true" width="800" header="Buscar pedidos por cliente"
                              dynamic="true">

                        <!-- <div class="form-horizontal" id="formControles">  DIV COMO SI FUERA UN FORM-->                      
                        <div class="row">
                            <label for="cliente"  >Razón social</label>
                            <h:inputText  class="mayuscula" id="cliente" 
                                          value="#{ordenTrabajoBean.orden.descCliente}"  />
                            <p:commandLink ajax="true"
                                           process="clientesDialog @this"
                                           update="tblPedidos"
                                           styleClass="btn btn-default"
                                           action="#{ordenTrabajoBean.buscarPedidosCliente()}">
                                Buscar
                            </p:commandLink>
                        </div>  
                        <div class="row">
                            <p:dataTable id="tblPedidos"
                                         value="#{ordenTrabajoBean.lstPedidos}"
                                         var="ped"
                                         emptyMessage="#{ordenTrabajoBean.mensajeSinPedidos}">
                                <p:column headerText="">
                                    <h:selectBooleanCheckbox value="#{ped.selected}"/>
                                </p:column>
                                <p:column headerText="Nro.Pedido">
                                    <h:outputText value="#{ped.numPedido}"/>
                                </p:column>
                                <p:column headerText="Descripcion">
                                    <h:outputText value="#{ped.descripcion}"/>
                                </p:column>
                                <p:column headerText="Fecha">
                                    <h:outputText value="#{ped.fechaRegistro}">
                                        <f:convertDateTime pattern="dd/MM/yyyy HH:mm"/>
                                    </h:outputText>
                                </p:column>
                            </p:dataTable>
                        </div>
                        <!--</div>-->
                        <f:facet name="footer">
                            <p:commandLink ajax="true"
                                           process="clientesDialog @this"
                                           update="formOrdenTrabajo"
                                           styleClass="btn btn-default"
                                           action="#{ordenTrabajoBean.seleccionarPedidosCliente()}">
                                Listo
                            </p:commandLink>
                        </f:facet>
                    </p:dialog>
                    <h:panelGroup rendered="#{clienteBean.mensajeExito!=null}" id="panelMensaje" >
                        <div style="text-align: center;">
                            <span class="alert alert-success">
                                <h:outputText value="#{clienteBean.mensajeExito}" escape="false"/>
                            </span>
                        </div>
                    </h:panelGroup>
                </h:form>
            </div> 
        </h:panelGroup>
        <!-- =========================================  -->
    </ui:define>
</ui:composition>
